<template>
	<uni-nav-bar
		v-if="!sheep.$store('app').isWxBrowser"
		left-icon="left"
		title="测试页"
		fixed
		@clickLeft="goBack"
		height="100rpx"
	/>
	<view class="container">
		<view>基础组件测试页</view>
		<b-button type="primary" style="border-radius: 50rpx; font-size: 32rpx">提交</b-button>
		<f-searchBar @searchSuccess="searchSuccess" />
		<f-share-card></f-share-card>
		<f-print-singleGoods-card></f-print-singleGoods-card>

		<button @click="openLinkShare">打开link弹窗</button>
		<f-link-shareModal ref="linkShareRef"></f-link-shareModal>

		<button @click="openPosterShare">打开poster弹窗</button>
		<f-poster-shareModal
			v-if="show"
			ref="posterShareRef"
			:Data="Data"
			@cancel="cancelPoster"
		></f-poster-shareModal>

		<f-add-to-cartBar></f-add-to-cartBar>

		<f-cart-singleGoods-card
			v-for="item in Data2"
			:key="item.id"
			:data="item"
		></f-cart-singleGoods-card>

		<uni-data-select v-model="item.spec" :localdata="range" :clear="false"></uni-data-select>
		<uni-data-select v-model="item.spec2" :localdata="range" :clear="false"></uni-data-select>
		<uni-data-select v-model="item.spec3" :localdata="range" :clear="false"></uni-data-select>
		<uni-data-select v-model="item.spec4" :localdata="range" :clear="false"></uni-data-select>
	</view>
</template>

<script setup>
	import { ref, reactive } from 'vue';
	import sheep from '@/sheep';

	const show = ref(false);
	const linkShareRef = ref();
	const range = reactive([
		{
			value: '0',
			text: '同色16斜大方',
		},
		{
			value: '0',
			text: '同色16斜小方',
		},
		{
			value: '0',
			text: '同色14斜大方',
		},
		{
			value: '0',
			text: '同色14斜小方',
		},
	]);
	const item = reactive({
		spec: '',
		spec2: '',
		spec3: '',
		spec4: '',
	});
	const Data2 = reactive([
		{
			id: '28',
			img: './../../../static/common/goodsPic.png',
			name: '丝巾名称1',
			code: 'CWM23232232',
			spec: '',
			num: 1,
		},
		{
			id: '29',
			img: './../../../static/common/goodsPic.png',
			name: '丝巾名称2',
			code: 'CWM23232232',
			spec: '',
			num: 1,
		},
	]);
	const Data = reactive([
		{
			name: '丝巾名称',
			code: 'CWM23232232',
			img: './../../../static/common/goodsPic.png',
		},
		{
			name: '丝巾名称',
			code: 'CWM23232232',
			img: './../../../static/common/goodsPic.png',
		},
	]);

	const searchSuccess = (e) => {
		// TODO 图片上传成功的回调
	};
	const openLinkShare = () => {
		linkShareRef.value.open();
	};
	// 画报分享
	const openPosterShare = () => {
		show.value = true;
	};
	const cancelPoster = () => {
		show.value = false;
	};
	const goBack = () => {
		sheep.$router.back();
	};
</script>

<style lang="scss" scoped>
	.container {
		background: #eef0f2;
		height: 100vh;
		padding-bottom: 200rpx;

		:deep(.uni-button) {
			border-radius: 50rpx !important;
		}
	}

	:deep(.uni-card .uni-card__content) {
		color: red;
	}
</style>
